<template>
  <view class="select">
    <view class="select-value-wrap" @click="handleShowOpt">
      <text class="select-value-text">{{ label }}</text>
      <uni-icons v-if="showOption" type="arrowup" size="11" color="#ffffff" class="select-value-icon"></uni-icons>
      <uni-icons v-else type="arrowdown" size="11" color="#ffffff" class="select-value-icon"></uni-icons>
    </view>
    <view v-if="showOption" class="option-wrap">
      <view v-for="(item, index) in options" :key="index" :class="{active:item.value===value}" class="option-item" @click="handleSelectItem(item)">
        <text>{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default() {
        // [{label,value}]
        return [];
      }
    },
    value: {
      type: [String, Number, Array, Object],
      default() {
        return "";
      }
    }
  },
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
      showOption: false
    };
  },
  computed: {
    label() {
      let item = this.options.find(v => v.value == this.value);
      // console.log(this.value, item, this.options);

      return item ? item.label : "";
    }
  },
  methods: {
    handleShowOpt() {
      this.showOption = !this.showOption;
    },
    handleSelectItem(item) {
      this.handleShowOpt();
      this.$emit("change", item);
    }
  }
};
</script>

<style scoped lang="scss">
.select {
  display: inline-flex;
  position: relative;
  background-color: $businessStatusColor;
  border-radius: 30rpx;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 22rpx;
  z-index: 9999;
  .select-value-wrap {
    padding: 0 25rpx;
    .select-value-text {
      margin-right: 10rpx;
      color: #ffffff;
    }
  }
  .option-wrap {
    box-sizing: border-box;
    min-width: 100%;
    position: absolute;
    top: 70rpx;
    background-color: #ffffff;
    padding: 10rpx 40rpx;
    border-radius: 25rpx;
    .option-item {
      padding: 5rpx 0;
      &.active {
        color: $activeColor;
      }
    }
  }
}
</style>
